<template>
    <div class="tab1">
        <Spin v-if="Loading" size="large" fix></Spin>
        <Form ref="data" :model="data" :rules="rule" :label-width="160" inline>
            <table style="width:100%;">
                <tr>
                    <td style="width:26%;" colspan="2">
                        <FormItem label="申请人证件号码" prop="azcp0001">
                            <Input v-model="data.azcp0001" placeholder="" @on-blur="loadExistData()"
                                   class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td style="width:29%;" colspan="2">
                        <FormItem label="申请人证件类型" prop="azcp0002">
                            <c-dict-select v-model="data.azcp0002" dictCode="certificatetype"
                                           showKeys="1" :width="180"/>
                        </FormItem>
                    </td>
                    <td style="width:29%;" colspan="2">
                        <FormItem label="申请人姓名" prop="azcp0003">
                            <Input v-model="data.azcp0003" placeholder="" class="itemStyle" maxlength="50"/>
                        </FormItem>
                    </td>
                    <td style="width:13%;" rowspan="4">
                        <Upload action="" :before-upload="(file) => beforeUpload(file)" name="azcp0519"
                                :accept="acceptImg">
                            <img :src="data.azcp0519" alt="..." class="dbhead-img"/>
                        </Upload>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="是否本地户籍" prop="azdf0505">
                            <c-dict-select v-model="data.azdf0505" dictCode="yesorno" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="申请类型" prop="azdf0509">
                            <c-dict-select v-model="data.azdf0509" dictCode="abaf0110code" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="家庭类别" prop="azdf0503">
                            <c-dict-select v-model="data.azdf0503" dictCode="abaf0112code" :width="180"/>
                        </FormItem>
                    </td>

                </tr>
                <tr>
                    <td colspan="2">
                        <FormItem label="联系人类型" prop="azdf0510">
                            <c-dict-select v-model="data.azdf0510" dictCode="contact_type" :width="180"/>
                        </FormItem>
                    </td>
                    <td colspan="2">
                        <FormItem label="联系人姓名" prop="azdf0511">
                            <Input v-model="data.azdf0511" placeholder="" class="itemStyle"/>
                        </FormItem>
                    </td>

                    <td colspan="2">
                        <FormItem label="联系方式" prop="azdf0010">
                            <Input v-model="data.azdf0010" placeholder="" class="itemStyle" :maxlength="11"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <FormItem label="户籍地详细地址" prop="azdf0500">
                            <Input v-model="data.azdf0500" placeholder="" class="itemLongStyle" maxlength="100"/>
                        </FormItem>
                    </td>

                    <td colspan="2">
                        <FormItem label="常住地邮政编码" prop="azdf0502">
                            <Input v-model="data.azdf0502" placeholder="" class="itemStyle" maxlength="10"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <FormItem label="常住地详细地址" prop="azdf0008">
                            <Input v-model="data.azdf0008" placeholder="" class="itemLongStyle" maxlength="100"/>
                        </FormItem>
                    </td>

                    <td colspan="2">
                        <FormItem label="户籍地邮政编码" prop="azdf0009">
                            <Input v-model="data.azdf0009" placeholder="" class="itemStyle"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <FormItem label="所属地行政区划" prop="azdf0007">
                            <area-linkage :areaCode.sync="data.azdf0007" :countyDisable=countyState
                                          :streetDisable=streetState
                                          :communityDisable=communityState></area-linkage>
                        </FormItem>
                    </td>
                </tr>
            </table>
        </Form>
        <div style="margin-top:50px;text-align: center ">
            <Button type="primary" @click="nextStep('data')">下一步
            </Button>
        </div>
    </div>
</template>

<script>
    import {postAction} from '@/api/request'
    import {IdentityCodeValid} from '@/plugins/idcardValid.js'
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import head_photo from '@/assets/images/header.jpeg'

    const imgSrc = head_photo;
    const imageConversion = require("image-conversion");
    export default {
        name: 'application1',
        components: {},
        mixins: [CommonMixin],
        data() {
            return {
                countyState: false,
                streetState: false,
                communityState: false,
                familyInfo: {},
                uploadFileData: {},
                fieldsToValidate: ['azcp0001', 'azcp0002', 'azcp0003', 'azdf0500', 'azdf0008', 'azdf0007', 'azdf0010', 'azdf0503', 'azdf0509', 'azdf0505', 'azdf0500'
                    , 'azdf0510', 'azdf0511'],
                rule: {
                    azcp0001: [
                        {required: true, message: '请填写申请人证件号码', trigger: 'blur'}
                    ],
                    azcp0002: [
                        {required: true, message: '请选择证件类型', trigger: 'blur'}
                    ],
                    azcp0003: [
                        {required: true, message: '请填写申请人姓名', trigger: 'blur'}
                    ],
                    azdf0500: [
                        {required: true, message: '请填写户籍地地详细地址', trigger: 'blur'}
                    ],
                    azdf0008: [
                        {required: true, message: '请填写常住地详细地址', trigger: 'blur'}
                    ],
                    azdf0007: [
                        {required: true, message: '请选择所属地行政区划', trigger: 'blur'},
                        {pattern: /^((?!000$).)*$/, message: '请选择完整所属地行政区划', trigger: 'blur'}
                    ],
                    azdf0010: [
                        {required: true, message: '请填写联系方式', trigger: 'blur', pattern: /^[0-9]+$/,}
                    ],
                    azdf0503: [
                        {required: true, message: '请选择家庭类别', trigger: 'blur'}
                    ],
                    azdf0509: [
                        {required: true, message: '请选择申请类型', trigger: 'blur'}
                    ],
                    azdf0505: [
                        {required: true, message: '请选择是否本地户籍', trigger: 'blur'}
                    ],
                    azdf0510: [
                        {required: true, message: '请选择联系人类型', trigger: 'blur'}
                    ],
                    azdf0511: [
                        {required: true, message: '请填写联系人姓名', trigger: 'blur'}
                    ],

                },
                url: {
                    submit: '/api/ac/subsistence/ss11301Service/createStep1Submit',
                    areaInfo: '/api/ac/subsistence/ss11001Service/getUserAreaInfo',
                },
                Loading: false,
                data: {
                    azcp0002: '1',
                    azcp0003: '',
                    azdf0006: '',
                    azdf0007: '',
                    azdf0501: '',
                    azdf0010: null,
                    azdf0500: '',
                    azdf0008: '',
                    azcp0001: '',
                    azcp0519: '',
                },
            }
        },
        methods:
            {

                loadExistData() { //输入身份证号码时载入数据
                    let that = this;
                    let azcp0001 = that.data.azcp0001;
                    azcp0001 = azcp0001.toUpperCase();
                    that.data.azcp0001 = azcp0001
                    if (!IdentityCodeValid(azcp0001)) {
                        that.$Message.error('申请人身份证号码格式不合法')
                        that.data.azcp0001 = null;
                        return
                    }
                },
                loadImg(response) {
                    if (response.errcode == 0) {
                        this.data.azcp0519 = response.data;
                    } else {
                        this.data.azcp0519 = imgSrc;
                        this.$Message.error('上传失败！')
                    }
                    this.Loading = false;
                },
                nextStep: function (name) {
                    this.data.azcp0519url = this.header;
                    let that = this;
                    let validate = true;
                    let err_msg = [];
                    that.Loading = true;
                    for (let item of that.fieldsToValidate) {
                        that.$refs[name].validateField(item, (error) => {
                            if (error) {
                                validate = false
                                err_msg.push(error)
                            }
                        })
                    }
                    if (validate) {
                        let dataParam = Object.assign({}, that.data)
                        let url = that.url.submit;
                        dataParam.ss11302Id = this.$parent.familyInfo.ss11302Id;
                        dataParam.ss11301Id = this.$parent.familyInfo.ss11301Id;
                        postAction(url, dataParam).then((res) => {
                            if (res.data.errcode == 0) {
                                let info = res.data.data;
                                that.$Message.success("保存成功！")
                                this.$parent.familyInfo.ss11302Id = info.ss11302Id;
                                this.$parent.familyInfo.ss11301Id = info.ss11301Id;
                                that.$emit('nextStep', that.familyInfo)
                            } else {
                                that.$Message.error(res.data.errmsg)
                            }

                        }).finally(() => {
                            that.Loading = false
                        })
                    } else {
                        that.$Message.error(err_msg[0])
                        that.Loading = false
                        return
                    }
                },
                setAreaState() {
                    if (this.familyInfo && this.familyInfo.area) {
                        this.setArea(this.familyInfo.area);
                    } else {
                        let that = this;
                        let url = that.url.areaInfo;
                        let dataParam = {};
                        postAction(url, dataParam).then((res) => {
                            if (res.data.data) {
                                if (res.data.data.code == 1) {
                                    let record = res.data.data.data;
                                    this.setArea(record);
                                }
                            } else {
                                that.$Message.error('数据交互异常，个人属地信息载入异常')
                            }
                        }).finally(() => {
                            that.Loading = false;
                        });
                    }
                },
                setArea(record) {
                    var that = this;
                    let arealevel = record.arealevel;
                    let areacode = record.areacode;

                    if (!that.data.azdf0007) {
                        that.data.azdf0007 = areacode;
                    }

                    if (arealevel == 4) {
                        that.countyState = true;
                        that.streetState = true;
                        that.communityState = true;
                    } else if (arealevel == 3) {
                        that.countyState = true;
                        that.streetState = true;
                        that.communityState = false;
                    } else if (arealevel == 2) {
                        that.countyState = true;
                        that.streetState = false;
                        that.communityState = false;
                    }
                    this.$parent.familyInfo.area = record;
                    this.Loading = false;
                }
            },
        mounted() {
            this.loading = true;
            this.familyInfo = this.$parent.familyInfo;
            this.setAreaState();
            this.data = this.familyInfo;
            if (!this.familyInfo.azcp0519) {
                this.data.azcp0519 = head_photo;
                this.data.azcp0002 = "1";
            }
        },
        watch: {
            "data.azdf0510": function (val, oldVal) {
                var azdf0510 = this.data.azdf0510;
                if (azdf0510 == '01') {
                    this.data.azdf0511 = this.data.azcp0003;
                } else {
                    if (val && oldVal) {
                        this.$set(this.data, "azdf0010", "");
                        this.$set(this.data, "azdf0511", "");
                    }
                }
            }
        }
    }

</script>

<style scoped>
    .dbhead-img {
        height: 160px;
        width: 120px;
        margin-left: 10px;
    }

    /deep/ .ivu-form-item-error-tip {
        display: none;
    }

    .ivu-form-item {
        margin-bottom: 0px;
    }

    .itemStyle {
        width: 180px
    }

    .itemLongStyle {
        width: 450px
    }

    /deep/ .ivu-upload-list {
        display: none;
    }
</style>
